import { View } from "@tarojs/components";
import { SwipeableCard, ImageCard } from "@/components";
import Taro from "@tarojs/taro";
import {
  getFormatRecordValue,
  getOptionTxt,
  CategoryOptions,
  GroupOptions,
} from "@/utils";
import { TRecord } from "@/types";
import "./index.less";

type Props = {
  item: TRecord;
  handleDelRecord: (id: string) => void;
  handleEdit: (item: TRecord) => void;
};
const RecordItem = ({ item, handleDelRecord, handleEdit }: Props) => {
  return (
    <SwipeableCard
      key={item._id}
      childCls="record-item"
      onDelete={() => handleDelRecord(item._id)}
      onClick={() => handleEdit(item)}
      style={{ marginBottom: Taro.pxTransform(12) }}
    >
      <ImageCard
        img={item.img}
        title={item.name}
        size={Taro.pxTransform(100)}
        showTitle={false}
        detailAction={item.motionId}
        isCube
      />
      <View className="record-item-info">
        <View className="flex-between">
          <View style={{ marginBottom: Taro.pxTransform(8) }}>{item.name}</View>
          <View className="flex">
            <View className="sub">
              {getOptionTxt(item.category, CategoryOptions)}
            </View>
            {item.category !== 1 && (
              <View className="sub">
                {getOptionTxt(item.group, GroupOptions)}
              </View>
            )}
          </View>
        </View>
        <View className="record-item-info-detail">
          {getFormatRecordValue(item).map((i) => (
            <View>{i}</View>
          ))}
        </View>
      </View>
    </SwipeableCard>
  );
};

export default RecordItem;
